<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>新上视频审核</title>
    #include("/cdn/index.html")
    <link rel="stylesheet" type="text/css" href="/static/css/admin/bootstrap.css">
    <link rel="stylesheet" href="/static/css/admin/style.css">
    <link rel="stylesheet" type="text/css" href="/static/css/admin/header.css">
    <script type="text/javascript" src="/static/js/admin/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/admin/bootstrap.js"></script>
    <script type="text/javascript" src="/static/js/admin/open_close.js"></script>
    <script type="text/javascript" src="/static/layui/layer/layer.js"></script>
    <style type="text/css">
        .table thead tr > td:last-child {
            width: 160px;
        }

        .table .btn.btn-xs {
            margin: 0 2px;
        }
    </style>
</head>
<body>
<div id="wrapper">
    #include('left.html')
    <div class="overlay"></div>
    <!-- Page Content -->
    <div id="page-content-wrapper">
        <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
            <span class="hamb-top"></span>
            <span class="hamb-middle"></span>
            <span class="hamb-bottom"></span>
        </button>
        <div class="container">
            <div class="artlist-xcontent">
                <div>
                    <div class="col-lg-12 col-xs-12">
                        <h4><span class="fa fa-hand-o-right"></span> 新上视频审核</h4>
                    </div>
                    <div>
                        <div id="taskTable" class="col-lg-12 col-xs-12">
                            <table class="table table-striped" style="background-color: grey;">
                                <thead class="bg-color-x">
                                <tr>
                                    <td>Id</td>
                                    <td>视频名称</td>
                                    <td>发布时间</td>
                                    <td>所属章</td>
                                    <td>节</td>
                                    <td>是否发布</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody>

                                <tr is="task-item" v-for="(t, index) in tasks" :task="t" :set_="set_" :index="index"
                                    :key="t.id">
                                </tr>
                                </tbody>
                            </table>
                            <!-- 分页按钮 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->
    </div>
    <!-- /#wrapper -->
</div>
<template id="task-item">
    <tr>
        <td>{{task.id}}</td>
        <td>{{task.name}}</td>
        <td>{{task.time}}</td>
        <td>{{task.zhang_id}}</td>
        <td>{{task.jie_id}}</td>
        <td>
            <span v-if="task.status==0" class="label label-warning">未发布</span>
            <span v-if="task.status==1" class="label label-success">已发布</span>
        </td>
        <td>
            <button @click.prevent="set_(index)" v-if="task.status==0" class="btn btn-xs btn-info">发布任务</button>
            <button @click.prevent="set_(index)" v-if="task.status==1" class="btn btn-xs btn-danger">隐藏任务</button>
            <!--<button @click.prevent="delete_(index)" v-if="user.role<=3" class="btn btn-xs btn-danger">删除</button>-->
            <!--<span v-if="user.role>3" class="btn btn-xs btn-danger"></span>-->
        </td>
    </tr>
</template>

<script type="text/javascript">
    var taskvm = new Vue({
        el: '#taskTable',
        data: {
            tasks: [],
            page: {
                pageNum: 1,
                pagesize: 10,
                totalPages: 1
            }

        },
        methods: {
            set_: function (index) {
                var self = this;
                var task = self.tasks[index];
                $.post('/admin/vedioaudit/audit', {tid: task.id}, function (data) {
                    if (data.success) {
                        task.status = (task.status === 0 ? 1 : 0);
                        layer.open({
                            title: '发布状态',
                            content:  (task.status === 0 ? '<h4>驳回发布!</h4>' : '<h4>通过发布!</h4>')
                        });
                    }
                })
            }
        },
        created: function () {
            $.post('/admin/vedioaudit/page', function (data) {
                if (data.success) {
                    taskvm.tasks = [];
                    taskvm.tasks = data.payload.rows;
                }
            })
        },
        components: {
            'task-item': {
                props: ['task', 'set_', 'index'],
                template: '#task-item'
            }
        }
    })
</script>
</body>
</html>